<template>
    <div class="address-box">
        <el-select 
            class="ChangChunEhlSelect"
            popper-class="ChangChunEhlSelectPopper"
            size="mini"
            multiple
            collapse-tags
            v-model="value" 
            @change="changeCity"
            @visible-change="visibleShow"
            :placeholder="$t('Byname20')">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id">
            </el-option>
        </el-select>
    </div>
  </template>
  <script>
    import { getCity } from '@/api/mapApi.js'
    export default {
      name: 'weatherBox',
      props: {
        addressData: {
          type: Object,
          default: () => ({}),
        },
      },
      data() {
        return {
            visible: false,
            options: [],
            value: ''
        }
      },
      created() {
    this.init()
  },

    methods: {
        init(){
            getCity().then(res => {
                if(res.status == 200){
                    this.options = res.data.list
                }else{
                    this.options = []
                }
            })
        },
        visibleShow(e){
            this.visible = e 
            if(!this.visible){
                let id = this.value.join(',')
                this.$eventBus.$emit('change-city', id)
            }
        },
        changeCity(e){
            if(!this.visible){
                let id = this.value.join(',')
                this.$eventBus.$emit('change-city', id)
            }
        }
    }
}
  </script>
  <style lang="scss">
    //选择框样式
    .ChangChunEhlSelect {

        &.el-select {
            .el-select__tags{
                max-width: 100% !important;
                .el-tag.el-tag--info{
                    background-color: #21406f !important;
                    border-color: #21406f !important;
                    color: #fff !important;
                }
            }
            // 输入框样式
            .el-input__inner {
                color: #ebf4ff;
                font-size: 18px;
                background: #fff0;
                border-color: #fff0;

                &::placeholder {
                    color: #b0d5ff;
                }
            }

            .el-input.is-focus .el-input__inner {
                border-color: #fff0 !important;
            }
        }
    }
    //选择框弹出框样式
    .ChangChunEhlSelectPopper {
        &.el-select-dropdown {
            background-color: #21406f;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 11px 0 rgb(0 0 0 / 8%);
        }

        &.el-popper[x-placement^='bottom'] .popper__arrow::after {
            top: 0;
            border-bottom-color: #21406f;
        }

        .el-select-dropdown__item {
            color: #fff !important;

            &.selected {
                color: #fff !important;
                background-color: rgb(172 202 255 / 30%) !important;
            }
        }

        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
            background-color: rgb(172 202 255 / 30%);
        }
    }
</style>
  <style scoped lang="scss">
    .address-box {
        position: absolute;
        z-index: 101;
        width: 240px;
        height: 60px;
        display: flex;
        align-items: center;
        .el-select {
            width: 220px;
        }
    }
  </style>
  